import React, {Component,} from 'react'
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'

import GuessCard from "./GuessCard/GuessCard"
import ScoreTimeLineCard from "./ScoreTimeLineCard/ScoreTimeLineCard"

import './analysis.css'
import InjureInfo from "./InjureInfo/InjureInfo";
import History from "./History/History";
import Record from "./Record/Record";
import {bindEvent, getDom, getDoms} from "../../../../../utils/commonfunc";
import _ from "lodash";
import GoToAi from "./GoToAi/GoToAi";
import Rank from "./Rank/Rank";
import IntelligenceItem from "../../../../../shared-components/IntelligenceItem/IntelligenceItemPreview";
import IntelligenceItemPreview from "../../../../../shared-components/IntelligenceItem/IntelligenceItemPreview";

class Analysis extends Component {

    constructor(props) {
        super(props)
        this.matchId = this.props.match.params.gameId
    }


    componentDidMount() {
        this.fetchGameIntelligence(this.matchId)
        this.fetchGameAnalysis(this.matchId)
            .then(() => {
                this.props.setContentCtn(this.ctnContent, this.props.bindScrollEvent)
            })
        // let ctn = getDom('.am-tabs-pane-wrap-active')
        //
        // const scrollCallback = _.throttle(() => {
        //     const content = this.ctnContent
        //     const contentHeight = content.scrollHeight
        //     const afterScrollHeight = document.documentElement.clientHeight - 64 - 43.5
        //     const top = ctn.scrollTop
        //     if (top > 0 && afterScrollHeight < contentHeight) {
        //         this.props.setAtTop(false)
        //     } else if (top === 0) {
        //         this.props.setAtTop(true)
        //     }
        // }, 100)
        // if (ctn) {
        //     bindEvent(ctn, 'scroll', scrollCallback)
        // }
    }

    fetchGameAnalysis = (id) => {
        return this.props.doFetchGameAnalysis({id,})
    }

    fetchGameIntelligence = (id) => {
        return this.props.doFetchGameIntelligence({id})
    }

    fetchMatchGuess = (id) => {
        let uid = localStorage.getItem('userid')
        return this.props.doFetchMatchGuess({mid: Number(id), uid,})
    }

    renderIntelligence = (data) => {
        return <IntelligenceItemPreview intelligence={data}/>
    }

    render() {
        const {
            analysis,
            tlive,
            home_team,
            away_team,
            intelligence,
        } = this.props.currentGame

        if (analysis === undefined) return null

        if (analysis && analysis.err) {
            return null
        }

        const {
            // info,
            history,
            teams,
            goal_distribution,
            table,
            matchevents,
        } = analysis
        // Object.entries(analysis).map(e => {
        //     console.log(e[0], e[1])
        // })

        //
        // const homeScored = goal_distribution.home.scored
        // const awayScored = goal_distribution.away.scored


        return (
            <div
                ref={el => this.ctnContent = el}
            >
                {/*<GuessCard />*/}

                {/*<GoToAi*/}
                {/*    changePage={this.props.changePage}*/}
                {/*/>*/}

                <ScoreTimeLineCard
                    goalD={goal_distribution}
                    home={home_team}
                    away={away_team}
                    tlive={tlive}
                />

                <Rank
                    home={home_team}
                    away={away_team}
                    table={table}
                />

                {this.renderIntelligence(intelligence)}

                <History
                    vs={history?.vs}
                    teams={teams}
                    events={matchevents}
                    currentGame={this.props.currentGame}
                />

                <Record
                    homeRecord={history?.home}
                    awayRecord={history?.away}
                    teams={teams}
                    events={matchevents}
                    currentGame={this.props.currentGame}
                />
            </div>
        )
    }
}

const mapState = state => ({
    currentGame: state.game.currentGame,
})

const mapDispatch = dispatch => ({
    doFetchGameAnalysis: (payload) => dispatch.game.doFetchGameAnalysis(payload),
    doFetchGameIntelligence: (payload) => dispatch.game.doFetchGameIntelligence(payload),
    doGuessMatch: (payload) => dispatch.game.doGuessMatch(payload),
    doFetchMatchGuess: (payload) => dispatch.game.doFetchMatchGuess(payload)
})

export default connect(
    mapState,
    mapDispatch,
)(withRouter(Analysis))
